<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/element-ui@2.13.2.index.css">
    <script src="/js/vue.min.js"></script>
    <script src="/js/vue-resource.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/axios.min.js"></script>
  <!-- 字体图标css的引入 -->
  <link rel="stylesheet" href="/css/font_830376_qzecyukz0s.css">
  <link rel="stylesheet" href="/css/color-dark.css">
  <link rel="stylesheet" href="/css/icon.css">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/base.css">
  <title></title>
</head>

<body>
  <div id="manage">
    <div class="login-wrap">
      <div class="ms-login">
          <div class="ms-title">后台管理系统</div>
          <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
              <el-form-item prop="username">
                  <el-input v-model="param.username" placeholder="用户名">
                      <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                  </el-input>
              </el-form-item>
              <el-form-item prop="password">
                  <el-input
                      type="password"
                      placeholder="密码"
                      v-model="param.password"
                      @keyup.enter.native="submitForm()"
                  >
                      <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                  </el-input>
              </el-form-item>
              <div class="login-btn">
                  <el-button type="primary" @click="submitForm()">登录</el-button>
              </div>
              <!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
          </el-form>
      </div>
  </div>
  </div>

  <script>
    var manage = new Vue({
      el: '#manage',
      data: {
        param: {
            username: '',
            password: '',
        },
        rules: {
            username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        },
      },
      watch: {
      
      },
      methods: {
        submitForm() {
            this.$refs.login.validate(valid => {
                if (valid) {
                    axios.post(window.url + '/auth/login', {
                        username: this.param.username,
                        password: this.param.password
                    })
                        .then((response) => {
                            var data = response.data;

                            // 后台返回token 并且数据正常 保存token
                            if (data.status == 200) {
                                this.$message.success('登录成功');
                                //全局存储token
                                // window.localStorage["token"] = JSON.stringify("Bearer " + data.data);
                                window.localStorage["token"] = "Bearer " + data.data;
                                // 存储用户名
                                localStorage.setItem('ms_username', this.param.username);
                                token = token + window.localStorage["token"];
                                setTimeout(function () {
                                    window.location.href = 'databaseManagement';

                                }, 1000);
                            } else {
                                this.$message.error('用户名或密码错误，请重新输入');
                                console.error(data.status);
                            }
                        });
                } else {
                    this.$message.error('请输入账号和密码');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
      }
    })

  </script>

</body>

</html>